<template>
  <div class="app-container">
    <!-- 搜索筛选操作栏 -->
    <div class="filter-container clearfix">
      <el-input v-model="listQuery.user" placeholder="请输入手机号" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.name" placeholder="请输入姓名" style="width: 200px;margin-left: 10px;" class="filter-item"
        @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 10px;" @click="handleFilter">
        搜索
      </el-button>
      <el-button v-waves class="filter-item" icon="iconfont qt-caozuo-xunhuan1" @click="clearFilter">
        清除条件
      </el-button>
    </div>

    <!-- 表格 -->
    <el-table :key="tableKey" ref="table" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="会员账号">
        <template slot-scope="{row}">
          {{ row.user }}
          <el-tag color="#000" effect="dark" v-if="row.status == 0">黑名单</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="实名认证" prop="name" align="center" />
      <el-table-column label="成交" header-align="center">
        <template slot-scope="{row}">
          <div>订单：{{ row.order_num }}</div>
          <div>金额：{{ row.balance || "0.00" }}</div>
        </template>
      </el-table-column>
      <el-table-column label="账户余额" align="center" prop="money" />
      <el-table-column align="center" label="注册时间" prop="created_at" />
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button size="mini" plain type="primary" @click="handleLook(row.id)">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div v-if="total>0" style="text-align: right;">
      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.per_page" @pagination="getList" />
    </div>
  </div>
</template>

<script>
  import {
    getMemberList
  } from '@/api/common'
  import waves from '@/directive/waves' // waves directive
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination

  export default {
    name: 'memberList',
    components: {
      Pagination
    },
    directives: {
      waves
    },
    data() {
      return {
        tableKey: 0,
        list: null,
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          per_page: 20,
          name: undefined,
          user: undefined
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      clearFilter() {
        this.listQuery['name'] = undefined
        this.listQuery['user'] = undefined
        this.handleFilter()
      },
      getList() {
        this.listLoading = true
        getMemberList(this.listQuery).then(response => {
          const { data, total } = response.data;
          this.list = data
          this.total = total
        }).finally(() => {
          this.listLoading = false
        })
      },
      // 查看
      handleLook(id) {
        this.$router.push(`/member/detail/${id}`)
      }
    }
  }
</script>
